/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
	<view class="home-nav" >
	<!-- #endif -->
	<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
	<view class="home-nav">
	<!-- #endif -->
	
		<view class="dot-main">
			<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
			<view :class="['dot-item',current==index?'active':'']" v-for="index in menuPage" :key="index"></view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
			<view :class="['dot-item',current==index-1?'active':'']" v-for="index in menuPage" :key="index"></view>
			<!-- #endif -->
		</view>
		<swiper class="swiper" :indicator-dots="false"  :interval="3000" :duration="500" @change="change">
		    <swiper-item>
		        <view class="swiper-item" >
					<view class="nav-area">
						<view class="nav-item" v-if="index<8" v-for="(item,index) in navData1" :key="index"  @click='toPage(item.url)'>
							<image :src="item.img"  mode="aspectFit"></image>
							<text >{{item.name}}</text>
						</view>
					</view>
		        </view>
		    </swiper-item>
			 <swiper-item>
			    <view class="swiper-item" >
					<view class="nav-area">
						<view class="nav-item" v-if="index>7" v-for="(item,index) in navData1" :key="index"  @click='toPage(item.url)'>
							<image :src="item.img" alt=""></image>
							<text >{{item.name}}</text>
						</view>
					</view>
			    </view>
			</swiper-item>
		</swiper>
	</view> 
</template>

<script>
	export default{
		data(){
			return{
				menuPage:2,
				current: 0,
				navData1:[
					{
						name:'景区神器',
						img:'/static/shenqi.png',
						url:'/pages/home/scenicSpot/shenqi'
					},
					{
						name:'语音导览',
						img:'/static/yydy1.png',
						url:'/pages/home/scenicSpot/audio/spotAudio'
					},
					{
						name:'旅游景区',
						img:'/static/lyjq.png',
						url:'/pages/home/scenicSpot/scenicSpot'
					},
					{
						name:'宾馆入住',
						img:'/static/bgrz.png',
						url:'/pages/home/hotel/hotel'
					},
					{
						name:'美食小吃',
						img:'/static/msxc.png',
						url:'/pages/home/food/food'
					},
					{
						name:'出行票务',
						img:'/static/cxpw.png',
						url:''
					},
					{
						name:'休闲娱乐',
						img:'/static/xxyl.png',
						url:'/pages/home/Recreation/recreation'
					},
					{
						name:'电商购物',
						img:'/static/dsgw.png',
						url:'/pages/home/shop/shop'
					},
					// {
					// 	name:'见物识别',
					// 	img:'/static/jwsb.png',
					// 	url:''
					// },
					{
						name:'团游旅行',
						img:'/static/tuanyou.png',
						url:'/pages/home/crew/crew'
					},
					{
						name:'更多',
						img:'/static/more.png',
						url:'/pages/home/more/more'
					},
				],
			}
		},
		methods: {
			toPage(toUrl){
				uni.navigateTo({url:toUrl})
			},
			change(e) {
				this.current = e.detail.current;
			},
		},
		created(){
			
		}
	}
</script>

<style scoped>
	/* 首页导航 */
	.home-nav{
		width: 700upx;
		height: 334upx;
		margin-left: 25upx;
		margin-right: 25upx;
		margin-top: -2vh;
		background: #ffffff;
		border-radius: 15px;
		z-index: 20;
		padding-top: 2vh;
		position: absolute;
		box-shadow: 0px 0px 20px 0px rgba(223,223,223,1);
	}
	.nav-area{
		width: 90%;
		margin-left: 5%;
		height: 50%;
		display: flex;
		flex-wrap:wrap;
		flex-direction:row;
	}
	.nav-item{
		width: 25%;
		margin-top: 20upx;
		padding: 2upx 0;
		text-align: center;
	}
	.nav-item image{
		width: 83upx;
		height:71upx;
	}
	.nav-item text{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 3vw;
	}
	
	.dot-main {
		width: 100%;
		height: 8upx;
		display: flex;
		margin-top: 300upx;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 40upx;
		height: 12upx;
		border-radius: 25px;
		background: rgba(0,0,0,0.3);
		margin: 0 0.5%;
		box-sizing: border-box;
	}
	.active {
		background: #568cfe;
	}
</style>
